.app{
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.taijibagua49{
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.taiji49{
	width: 100px;
	height: 100px;
	position: relative;
	border-radius: 50%;
	box-shadow: 0px -5px 10px 0px rgba(42,245,152,0.4), 0px 5px 10px 0px rgba(8,174,234,0.4);
	animation: zhuan49 5s linear infinite;
}
.taiji49:before,.taiji49:after{
	content: '';
	width: 100px;
	height: 50px;
	position: absolute;
	background-color: #fff;
	border-radius: 100px 100px 0 0;
}
.taiji49:after{
	top: 50px;
	background-color: #000;
	border-radius: 0 0 50px 50px;
}
.yu49:before,.yu49:after{
	content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	top: 25px;
	left: 50px;
	border-radius: 50%;
	background-color: #000;
	border: 19px solid #fff;
	z-index: 1;
}
.yu49:after{
	left: 0;
	background-color: #fff;
	border: 19px solid #000;
}
@keyframes zhuan49{
  to {
    transform: rotate(360deg);
  }
}
.bagua49{
	width: 40px;
	height: 5px;
	background-color: #2AF598;
	position: absolute;
	top: 0;
	transform-origin: 20px 100px;
	animation: eff49 5s linear infinite;
	opacity: 0.2;
}
.bagua49:before,.bagua49:after{
	content: '';
	width: 40px;
	height: 5px;
	background-color: #08AEEA;
	position: absolute;
	top: 10px;
}
.bagua49:after{
	top: 20px;
	background-color: #000;
}
.taijibagua49 .bagua49:nth-of-type(3){
	transform: rotate(-45deg);
	animation-delay: 4.375s;
}
.taijibagua49 .bagua49:nth-of-type(4){
	transform: rotate(-90deg);
	animation-delay: 3.75s;
}
.taijibagua49 .bagua49:nth-of-type(5){
	transform: rotate(-135deg);
	animation-delay: 3.125s;
}
.taijibagua49 .bagua49:nth-of-type(6){
	transform: rotate(-180deg);
	animation-delay: 2.5s;
}
.taijibagua49 .bagua49:nth-of-type(7){
	transform: rotate(-225deg);
	animation-delay: 1.875s;
}
.taijibagua49 .bagua49:nth-of-type(8){
	transform: rotate(-270deg);
	animation-delay: 1.25s;
}
.taijibagua49 .bagua49:nth-of-type(9){
	transform: rotate(-315deg);
	animation-delay: 0.625s;
}
.white149,.white249,.white349{
	width: 10px;
	height: 7px;
	background-color: #ffffff;
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translate(-50%,0);
	z-index: 10;
}
.white249{
	top: 10px;
}
.white349{
	top: 20px;
}
@keyframes eff49{
	0% {
	  opacity: 1;
	}
	100%{
		opacity: 0.2;
	}
}